<template>
  <div class="profile-container">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-card :bordered="false">
          <div class="avatar-container">
            <a-avatar
              :size="120"
              :src="userInfo.avatar"
              @error="handleAvatarError"
            />
            <div class="upload-container">
              <a-upload
                name="avatar"
                :show-upload-list="false"
                :before-upload="beforeAvatarUpload"
                @change="handleAvatarChange"
              >
                <a-button type="link">
                  {{ t('user.profile.changeAvatar') }}
                </a-button>
              </a-upload>
            </div>
          </div>
          <div class="user-info">
            <h2>{{ userInfo.realName }}</h2>
            <p>{{ userInfo.username }}</p>
          </div>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card :title="t('user.profile.basicInfo')" :bordered="false">
          <a-form
            :model="formState"
            :rules="rules"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 16 }"
            @finish="handleSubmit"
          >
            <a-form-item
              :label="t('user.profile.realName')"
              name="realName"
            >
              <a-input
                v-model:value="formState.realName"
                :placeholder="t('user.profile.realName')"
              />
            </a-form-item>

            <a-form-item
              :label="t('user.profile.phone')"
              name="phone"
            >
              <a-input
                v-model:value="formState.phone"
                :placeholder="t('user.profile.phone')"
              />
            </a-form-item>

            <a-form-item
              :label="t('user.profile.email')"
              name="email"
            >
              <a-input
                v-model:value="formState.email"
                :placeholder="t('user.profile.email')"
              />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 4 }">
              <a-space>
                <a-button type="primary" html-type="submit">
                  {{ t('user.profile.save') }}
                </a-button>
                <a-button @click="handleReset">
                  {{ t('user.profile.cancel') }}
                </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'

const { t } = useI18n()
const userStore = useUserStore()

// 用户信息
const userInfo = reactive({
  username: '',
  realName: '',
  avatar: '',
  phone: '',
  email: ''
})

// 表单状态
const formState = reactive({
  realName: '',
  phone: '',
  email: ''
})

// 表单验证规则
const rules = {
  realName: [
    { required: true, message: t('user.profile.realNameRequired') }
  ],
  phone: [
    { required: true, message: t('user.profile.phoneRequired') }
  ],
  email: [
    { required: true, message: t('user.profile.emailRequired') },
    { type: 'email', message: t('user.profile.emailInvalid') }
  ]
}

// 初始化表单数据
onMounted(async () => {
  try {
    const userData = await userStore.getUserInfo()
    Object.assign(userInfo, userData)
    Object.assign(formState, {
      realName: userData.realName,
      phone: userData.phone,
      email: userData.email
    })
  } catch (error: any) {
    message.error(error.message)
  }
})

// 头像上传前的验证
const beforeAvatarUpload = (file: File) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error(t('user.profile.avatarTypeError'))
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error(t('user.profile.avatarSizeError'))
  }
  return isJpgOrPng && isLt2M
}

// 头像上传状态改变
const handleAvatarChange = (info: any) => {
  if (info.file.status === 'done') {
    userInfo.avatar = info.file.response.url
    message.success(t('user.profile.avatarSuccess'))
  } else if (info.file.status === 'error') {
    message.error(t('user.profile.avatarFailed'))
  }
}

// 头像加载失败
const handleAvatarError = () => {
  userInfo.avatar = ''
}

// 提交表单
const handleSubmit = async (values: any) => {
  try {
    // TODO: 调用更新用户信息的API
    message.success(t('user.profile.success'))
  } catch (error: any) {
    message.error(error.message || t('user.profile.failed'))
  }
}

// 重置表单
const handleReset = () => {
  Object.assign(formState, {
    realName: userInfo.realName,
    phone: userInfo.phone,
    email: userInfo.email
  })
}
</script>

<style lang="less" scoped>
.profile-container {
  padding: 24px;

  .avatar-container {
    text-align: center;
    margin-bottom: 24px;

    .upload-container {
      margin-top: 16px;
    }
  }

  .user-info {
    text-align: center;

    h2 {
      margin-bottom: 8px;
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style> 